<template>
	<el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
		<el-menu
				:collapse="webConfigStore.layout.menuCollapse"
				:default-active="route.path"
				:unique-opened="webConfigStore.layout.menuUniqueOpened"
				class="layouts-menu-vertical"
		>
			<MenuTree :menus="userStore.menus"/>
		</el-menu>
	</el-scrollbar>
</template>

<script lang="ts" setup>
import {computed, nextTick, onMounted, ref} from 'vue'
import MenuTree from '../../menuTree.vue'
import {useRoute} from 'vue-router'
import type {ScrollbarInstance} from 'element-plus'
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {useUserStore} from '@/stores/modules/user.store'

const webConfigStore = useWebConfigStore()
const userStore = useUserStore()

const route = useRoute()

const verticalMenusRef = ref<ScrollbarInstance>()

const verticalMenusScrollbarHeight = computed(() => {
	let menuTopBarHeight = 0
	if (webConfigStore.layout.menuShowTopBar) {
		menuTopBarHeight = 50
	}
	if (webConfigStore.layout.layoutMode == 'Default') {
		return 'calc(100vh - ' + (32 + menuTopBarHeight) + 'px)'
	} else {
		return 'calc(100vh - ' + menuTopBarHeight + 'px)'
	}
})

/**
 * 滚动条滚动到激活菜单所在位置
 */
const verticalMenusScroll = () => {
	nextTick(() => {
		let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical li.is-active')
		if (!activeMenu) return false
		verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
	})
}

onMounted(() => {
	verticalMenusScroll()
})

</script>

<style>
.vertical-menus-scrollbar {
	background-color: v-bind('webConfigStore.getColorVal("menuBackground")');
	height: v-bind(verticalMenusScrollbarHeight);
}

.layouts-menu-vertical {
	border: 0;
	--el-menu-active-color: v-bind('webConfigStore.getColorVal("menuActiveColor")');
	--el-menu-bg-color: v-bind('webConfigStore.getColorVal("menuBackground")');
	--el-menu-text-color: v-bind('webConfigStore.getColorVal("menuColor")');
}
</style>
